| 屬性 | 用途 | 範例 | 備註 |
|---|---|---|---|
font-size |
設定文字大小 | font-size: 20px; |
常用單位：px、em、% 等 |
font-weight |
設定文字粗細 | font-weight: bold; |
常用值：粗體bold、較細lighter、較粗bolder |
line-height |
設定行距 | line-height: 2; |
常用單位：px、em、% 等，若省略單位則會依字型大小的比例設定 |
text-align |
設定文字對齊方式 | text-align: center; |
常用值：置左left、置中center、置右right、左右對齊justify |
| 屬性 | 用途 | 範例 | 備註 |
|---|---|---|---|
margin |
設定與其他元素的間距 | margin: 20px; |
常用單位：px、em、% 等 |
border |
設定框線粗細／顏色／樣式 | border: 1px black solid; |
粗細常用單位：px、em、% 等／顏色常用值（以紅色為例）：英文單字red、RGB值rgb(255, 0, 0)或十六進位制#ff0000／常用樣式：實線solid、虛線dashed、點線dotted |
padding |
設定內文與框線間距 | padding: 15px; |
常用單位：px、em、% 等 |
border-radius |
設定框線圓角程度 | border-radius: 15px; |
常用單位：px、em、% 等 |
margin、border、padding與元素之關係
可參考色碼表。
這邊要特別將margin、padding和border-radius拉出來講解，這三個屬性都會因為設定不同數量的值而產生不同結果。margin和padding是一樣的概念，因此以下只舉margin和border-radius為例。
margin: 20px;
20px。margin: 20px 10px;
20px，左右是10px。margin: 20px 10px 30px;
20px，左右是10px，下是30px。margin: 20px 10px 30px 5px;
20px，右是10px，下是30px，左是5px。border-radius: 20px;
20px。border-radius: 20px 10px;
20px，右上、左下是10px。border-radius: 20px 10px 30px;
20px，右上、左下是10px，右下是30px。border-radius: 20px 10px 30px 5px;
20px，右上是10px，右下是30px，左下是5px。今天先講文字和間距，margin和padding一直是我每次都需要重新理解過一次的內容，這次好好整理過相信應該是有學好了...吧。明天要介紹的也是基本美化，最後會展示利用以上特性進行美化過的網頁。我是YQ，完賽倒數5天，明天見。
iThome鐵人賽
看影片追技術